<div class="modal-dialog">
    <style>
        #selectUrl .modal-body {padding: 10px 15px;}
        #selectUrl .tab-pane {margin-top: 5px; min-height: 400px; max-height: 400px; overflow-y: auto;}
        #selectUrl .page-head {padding: 9px 0; margin-bottom: 8px;}
        #selectUrl .page-head h4 {margin: 0;}
        #selectUrl .btn {margin-bottom: 3px;}
        #selectUrl .modal-dialog {width: 930px;}
        #selectUrl .line {border-bottom: 1px dashed #ddd; color: #999; height: 36px; line-height: 36px;}
        #selectUrl .line .icon {height: 35px; width: 30px; position: relative; float: left;}
        #selectUrl .line .icon.icon-1:before {content: ""; width: 10px; height: 10px; border: 1px dashed #ccc; position: absolute; top: 12px; left: 10px;}
        #selectUrl .line .icon.icon-2 {width: 50px;}
        #selectUrl .line .icon.icon-2:before {content: ""; width: 10px; height: 10px; border-left: 1px dashed #ccc; border-bottom: 1px dashed #ccc; position: absolute; top: 12px; left: 20px;}
        #selectUrl .line .icon.icon-3 {width: 60px;}
        #selectUrl .line .icon.icon-3:before {content: ""; width: 10px; height: 10px; border-left: 1px dashed #ccc; border-bottom: 1px dashed #ccc; position: absolute; top: 12px; left: 30px;}
        #selectUrl .line .btn-sm {float: right; margin-top: 5px; margin-right: 5px; height: 24px; line-height: 24px; padding: 0 10px;}
        #selectUrl .line .text {display: block;}
        #selectUrl .line .label-sm {padding: 2px 5px;}
        #selectUrl .line.good {height: 60px; padding: 4px 0;}
        #selectUrl .line.good .image {height: 50px; width: 50px; border: 1px solid #ccc; float: left;}
        #selectUrl .line.good .image img {height: 100%; width: 100%;}
        #selectUrl .line.good .text {padding-left: 60px; height: 52px;}
        #selectUrl .line.good .text p {padding: 0; margin: 0;}
        #selectUrl .line.good .text .name {font-size: 15px; line-height: 32px; height: 28px;}
        #selectUrl .line.good .text .price {font-size: 12px; line-height: 18px; height: 18px;}
        #selectUrl .line.good .btn-sm {height: 32px; padding: 5px 10px; line-height: 22px; margin-top: 9px;}
        #selectUrl .tip {line-height: 250px; text-align: center;}
        #selectUrl .nav-tabs > li > a {padding: 8px 20px;}
    </style>
    <div class="modal-content">
        <div class="modal-header">
            <button data-dismiss="modal" class="close" type="button">×</button>
            <h4 class="modal-title">选择链接</h4>
        </div>

        <div class="modal-body">
            <ul class="nav nav-tabs" id="selectUrlTab">
                <!-- <li class="active"><a href="#sut_all">选择</a></li> -->
                <li class="active"><a href="#sut_custom">自定义</a></li>
            </ul>

            <div class="tab-content ">

                <!-- <div class="tab-pane active" id="sut_all">
                    <div class="page-head"><h4><i class="fa fa-folder-open-o"></i>标题</h4></div>
                    <nav data-href="url1" class="btn btn-default btn-sm" title="">地址1</nav>
                    <nav data-href="url2" class="btn btn-default btn-sm" title="">地址2</nav>
                </div> -->

                <div class="tab-pane active" id="sut_custom">
                    <form class="form-validate">
                    <div class="form-group">
                        <label class="col-sm-1 control-label">URL</label>
                        <div class="col-sm-9 col-xs-12">
                            <div class="input-group">
                                <input type="text" placeholder="输入自定义跳转的连接地址" id="select-diyurl-kw" value="" class="form-control">
                                <nav class="input-group-addon btn btn-default select-btn" data-type="diyurl" data-href="/pages/teacher/detail/detail?id=79">确认</nav>
                            </div>
                        </div>
                    </div>
                    </form>
                </div>

            </div>
        </div>

        <div class="modal-footer">
            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
        </div>

        <script>
            $(function(){

                $("#selectUrl").find('.nav-tabs a').click(function(e) {
                    $('#tab').val($(this).attr('href'));
                    e.preventDefault();
                    $(this).tab('show');
                });

                $(".select-btn").click(function(){
                    let type = $(this).data("type");
                    let kw = $.trim($("#select-"+type+"-kw").val());

                    if(type === 'diyurl'){
                        if(!kw || kw===''){
                            tip.msgbox.err("请输入链接地址！");
                            return;
                        }
                        $(this).data('href', kw);
                        return;
                    }

                });

            });
        </script>
    </div>
</div>